<template>
  <div class='login_container'>
    <!-- 登录快 -->
    <div class="login_box">
      <!-- 头像div -->
      <div class="avatar_box">
        <img src="../assets/logo.png"
             alt>
      </div>
      <!-- 表单区域 -->
      <!-- tips：必须搭配 @submit.native.prevent在表单el-form中，否则会发生页面刷新等事件 -->
      <el-form ref="loginForm"
               :model="loginInfo"
               class="login_form"
               label-width="80px"
               @submit.native.prevent
               :rules="loginRules">
        <!-- 用户名 -->
        <el-form-item label="用户名"
                      prop="username">
          <el-input v-model="loginInfo.username"
                    prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="loginInfo.password"
                    prefix-icon="el-icon-search"
                    type="password"></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="btns">
          <!-- native-type="submit"： 采用enter（回车登录，默认不开启enter回车登录） -->
          <!-- tips：必须搭配 @submit.native.prevent在表单el-form中，否则会发生页面刷新等事件 -->
          <el-button type="primary"
                     native-type="submit"
                     @click="login">提交</el-button>
          <el-button type="success"
                     @click="restLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// 使用axios
import axios from '../axios/index.js'
export default {
  //对数据进行绑定
  data () {
    return {
      loginInfo: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名！', trigger: 'blur' },
          { minn: 6, max: 10, message: '长度在5到10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'blur' },
          { minn: 6, max: 10, message: '长度在6到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    restLoginForm () {
      this.$refs.loginForm.resetFields()
    },
    login () {
      //this.$refs.loginForm获取DOM 表单校验validate方法有一个参数,参数是一个回调函数
      //回调函数的参数是valid,值为布尔值,true表示表单验证通过,false表示表单验证不通过,这也就是手动的兜底校验
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // get和post传参时不一样：
          // get前端需要使用params进行传参，后动不需要添加requestbody注解
          // post前端不需要params进行传参，后端需要添加requestbody注解

          //表单验证都通过后进行的操作
          axios.post('/login', {
            queryUsername: this.loginInfo.username,
            queryPassword: this.loginInfo.password
          }).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.message)
              // 必须先写入sessionStorage中，在在进行路由跳转 否则报错
              window.sessionStorage.setItem("user", res.data.data[0])
              // 登录后继续跳转之前想要去的页面，如果没有之前想要去的页面则去/（首页home）
              let redirect = decodeURIComponent(this.$route.query.redirect || '/home')
              this.$router.push(redirect)
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(e => {
            console.log(e)
          })
        } else {
          this.$message.error("请检查输入内容！")
        }
      })
    }
  }

}
</script>
<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px; // 圆角
  position: absolute; // 绝对定位
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 根据自己位置 以自己为长度位移
  // 头像框
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%; // 加圆角
    padding: 10px;
    box-shadow: 0 0 10px #ddd; // 盒子阴影
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0ee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%; // 加圆角
      background-color: #eee;
    }
  }
  .btns {
    display: flex; // 弹性布局
    justify-content: flex-end; // 尾部对齐
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box; // 设置边框
  }
}
</style>
